<template>
    <div class="productPage">
        <el-row>
            <el-col :span="6">
                <el-input
                    placeholder="请输入域名"
                    v-model="inputText"
                    class="input-with-select"
                    @keyup.enter.native="getProductList"
                >
                    <el-select v-model="selectModel.id" slot="prepend" placeholder="请选择">
                        <el-option
                            v-for="(item,index) in selectList"
                            :key="index"
                            :label="item.label"
                            :value="item.id"
                        ></el-option>
                    </el-select>
                    <el-button slot="append" icon="el-icon-search" @click="getProductList"></el-button>
                </el-input>
            </el-col>
            <el-col :offset="10" :span="8" align="right">
                <el-button type="primary" icon="el-icon-plus" @click="productEdit('', 'add')">新增产品</el-button>
                <!-- <el-button type="primary" icon="el-icon-edit" @click="smsEdit('', 'add')">短信管理</el-button> -->
                <el-button type="primary" icon="el-icon-download" @click="exportDomain()">导出域名</el-button>
            </el-col>
        </el-row>
        <el-table class="tableList" :data="productList" stripe height="88%">
            <el-table-column prop="id" label="产品ID" align="center" width="120"></el-table-column>
            <el-table-column prop="pro_detail" label="产品信息" align="left">
                <template slot-scope="scope">
                    <img :src="scope.row.thumb" width="66" alt />
                    <div class="productInfo">
                        <p>{{scope.row.pro_name_admin}}</p>
                        <p>
                            <span>{{scope.row.sale_num}}</span>
                            {{scope.row.coin}}
                        </p>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="domain" label="域名" align="center" width="220">
                <template slot-scope="scope">
                    <a
                        :href="'http://'+scope.row.domain + '/style/?id=' + scope.row.id"
                        class="aLink"
                        target="_blank"
                    >{{scope.row.domain}}/style/?id={{scope.row.id}}</a>
                </template>
            </el-table-column>
            <el-table-column prop="area" label="地区" align="center" width="80"></el-table-column>
            <!-- :filters="areaArr"
            :filter-method="filterHandler"-->
            <el-table-column prop="user" label="用户" align="center" width="80"></el-table-column>
            <el-table-column prop="board_id" label="主题模板" align="center" width="80"></el-table-column>
            <el-table-column prop="addtime" label="添加时间" align="center" width="160"></el-table-column>
            <el-table-column label="操作" align="center" width="220px">
                <template slot-scope="scope">
                    <el-button size="mini" @click="productEdit(scope.row.id, 'edit')">编辑</el-button>
                    <el-button size="mini" @click="productCopy(scope.row, 'edit')">复制</el-button>
                    <el-button size="mini" type="danger" @click="productDelFn(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            @current-change="pageChange"
        ></el-pagination>

        <!-- 复制弹框 -->
        <el-dialog title="复制产品" :visible.sync="copyDialog" width="400px" center>
            <div class="dialog_body">
                <p>请输入域名</p>
                <el-input v-model="productAddData.domain" placeholder></el-input>
                <p>请输入二级目录</p>
                <el-input v-model="productAddData.sec_dir" placeholder></el-input>
                <p>请选择产品地区</p>
                <el-select v-model="productAddData.area" placeholder="请选择">
                    <el-option
                        v-for="item in areaArr"
                        :key="item.value"
                        :label="item.label"
                        :value="item.label"
                    ></el-option>
                </el-select>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="copyDialog = false">取 消</el-button>
                <el-button type="primary" @click="copySaveFn">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 删除警告弹框 -->
        <el-dialog title="删除产品" :visible.sync="delDialog" width="400px" center>
            <div class="dialog_body">确定删除 {{delDomain}}？</div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="delDialog = false">取 消</el-button>
                <el-button type="primary" @click="delFn">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import Service from "../../services/main";
import areaData from "../../assets/data/area.json";
export default {
    name: "Product",
    data() {
        return {
            inputText: "",
            selectList: [
                {
                    id: "domain",
                    label: "域名"
                },
                {
                    id: "pro_name_admin",
                    label: "产品名"
                },
                {
                    id: "board_id",
                    label: "产品ID"
                },
                {
                    id: "user",
                    label: "用户"
                }
            ],
            selectModel: {
                id: "domain",
                label: "域名"
            },
            productList: [],
            page: 1,
            total: 0,
            loading: true,
            copyDialog: false,
            delDialog: false,
            productAddData: {},
            areaArr: areaData.areaArr,
            delId: null, // 删除产品id
            delDomain: ""
        };
    },
    created() {
        this.getProductList();
    },
    methods: {
        // 产品列表
        getProductList() {
            let params = {
                page: this.page,
                pageSize: 2,
                id: this.selectModel.id == "id" ? this.inputText : "",
                domain: this.selectModel.id == "domain" ? this.inputText : "",
                board_id:
                    this.selectModel.id == "board_id" ? this.inputText : "",
                pro_name_admin:
                    this.selectModel.id == "pro_name_admin"
                        ? this.inputText
                        : "",
                user: this.selectModel.id == "user" ? this.inputText : ""
            };
            Service.getproductData(this, params).then(res => {
                this.productList = res.result.list;
                this.total = res.result.total;
                this.loading = false;
            });
        },

        // 短信管理
        smsEdit() {},

        pageChange(val) {
            this.page = val;
            this.getProductList();
        },

        // 新增，编辑产品
        productEdit(id, type) {
            if (type == "add") {
                this.$router.push("/product/edit/new");
            } else if (type == "edit") {
                this.$router.push("/product/edit/" + id);
            }
        },

        // 删除产品
        productDelFn(data) {
            this.delDialog = true;
            this.delDomain = data.domain;
            this.delId = data.id;
        },

        // 确定删除
        delFn() {
            Service.productDel(this, { id: this.delId }).then(res => {
                if (res.errorMsg == "success") {
                    this.delDialog = false;
                    this.$message({
                        message: "已删除",
                        type: "success"
                    });
                    this.getProductList();
                }
            });
        },

        // 复制
        productCopy(data) {
            this.productAddData = JSON.parse(JSON.stringify(data));
            this.productAddData.sec_dir = "";
            this.productAddData.area = "马来西亚";
            this.copyDialog = true;
        },

        // 确定复制
        copySaveFn() {
            Service.productAdd(this, this.productAddData).then(res => {
                if (res.errorMsg == "success") {
                    this.copyDialog = false;
                    this.$message({
                        message: "复制成功!",
                        type: "success"
                    });
                    this.getProductList();
                }
            });
        },

        // 域名导出
        exportDomain() {
            window.location.href = "/api/Login/outExcel";
        },

        // 筛选
        filterHandler() {
            this.getProductList();
        }
    }
};
</script>

<style lang="scss">
.productPage {
    height: 100%;
}
.el-input .el-select .el-input {
    width: 100px;
}
.selects .el-select {
    margin-left: 10px;
}

.productInfo {
    display: inline-block;
    max-width: 600px;
    vertical-align: top;
}

.dialog_body {
    p {
        margin: 10px;
    }

    .el-input,
    .el-select {
        width: 100%;
    }
    .el-select .el-input {
        width: 100%;
    }
}

.aLink {
    text-decoration: 1px dotted #ccc;
}

.el-pagination {
    margin-top: 20px;
    text-align: center;
}

.el-table td,
.el-table th {
    padding: 6px 0;
}

.el-table__body-wrapper {
    overflow-y: auto;
}
</style>
